<template>
  <el-table
    :data="tableData1"
    stripe
    class="swiper-page-table"
    ref="table"
    height="100%"
  >
    <el-table-column type="index" label="序号" width="50"></el-table-column>
    <el-table-column prop="date" label="时间" width="120">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="140">
    </el-table-column>
    <el-table-column prop="address" label="地址" min-width="220">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData1: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        hasChildren: false
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        hasChildren: true
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        id: 5,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        id: 6,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        id: 7,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        id: 8,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  mounted() {
    this.tableScroll()
    },
  
  methods: {
    tableScroll(){
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      setInterval(() => {
        // 元素自增距离顶部1像素
        divData.scrollTop += 1;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0;
        }
      }, 30);  // 滚动速度
    }
  }
}
</script>

<style lang="less" scoped>
  .app-container {
    // 去除滚动的滚动条
       ::v-deep .el-table--scrollable-y .el-table__body-wrapper{
      overflow-y: hidden;
    }
  }
</style>